<!DOCTYPE html>
<html>
<head>
<style>
    @keyframes shake {
        0% { transform: translate(0, 0); }
        20% { transform: translate(5px, 5px); }
        40% { transform: translate(-5px, -5px); }
        60% { transform: translate(5px, -5px); }
        80% { transform: translate(-5px, 5px); }
        100% { transform: translate(0, 0); }
    }

    .box {
        background-image: url(./images/树.png);
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
        width: 500px;
        height: 500px;
        top: 15%;
        left: 20%;
    }

    .draggable {
        width: 50px;
        height: 50px;
        position: absolute;
        cursor: move;
        left: 60%;
        top: 40%;
    }

    .shake-animation {
        animation: shake 0.5s infinite;
    }

    .image1 {
        position: absolute;
        width: 500px;
        height: 500px;
        top: 15%;
        left: 20%;
    }

    .P {
        width: 50px;
        height: 50px;
        position: absolute;
        background-image: url('./images/桃子.png');
        background-size: cover;
        top: 0%;
        left: 0%;
        animation-name: peac;
        animation-timing-function: ease-in-out;
        z-index: 1;
        transform: translate(-50%, -50%);
        animation: shake2 2s infinite;
    }

    @keyframes shake2 {
        0% {
            transform: translate(-50%, -50%) rotate(0deg);
        }
        25% {
            transform: translate(-50%, -50%) rotate(-20deg);
        }
        50% {
            transform: translate(-50%, -50%) rotate(0deg);
        }
        75% {
            transform: translate(-50%, -50%) rotate(20deg);
        }
        100% {
            transform: translate(-50%, -50%) rotate(0deg);
        }
    }

    #a { position: absolute; top: 50%; left: 50%; }
    #b { position: absolute; top: 10%; left: 70%; }
    #c { position: absolute; top: 40%; left: 78%; }
    #d { position: absolute; top: 40%; left: 30%; }
    #e { position: absolute; top: 60%; left: 25%; }
    #f { position: absolute; top: 30%; left: 50%; }
    #g { position: absolute; top: 20%; left: 20%; }

</style>
</head>
<body>
    <div class="box">
        <div class="P" id="a"></div>
        <div class="P" id="b"></div>
        <div class="P" id="c"></div>
        <div class="P" id="d"></div>
        <div class="P" id="e"></div>
        <div class="P" id="f"></div>
        <div class="P" id="g"></div>
    </div>

    <img src="./images/草.png" class="image1">
    <img src="./images/手.png" class="draggable" id="myImage" draggable="false">

<script>
    var draggableElement = document.getElementById('myImage');
    var image1Element = document.querySelector('.box');

    var offsetX = 0;
    var offsetY = 0;

    draggableElement.addEventListener('mousedown', function(event) {
        offsetX = event.clientX - draggableElement.getBoundingClientRect().left;
        offsetY = event.clientY - draggableElement.getBoundingClientRect().top;

        document.addEventListener('mousemove', onMouseMove);
    });

    document.addEventListener('mouseup', function() {
        document.removeEventListener('mousemove', onMouseMove);
        if (isColliding(draggableElement, image1Element)) {
            image1Element.classList.add('shake-animation');
            setTimeout(function() {
                var pElements = document.querySelectorAll('.P');
                pElements.forEach(function(pElement) {
                    pElement.style.transition = 'top 0.5s ease-in-out';
                    pElement.style.top = '100%';
                });
            }, 3000); // 4秒后触发P元素向下移动
        } else {
            image1Element.classList.remove('shake-animation');
        }
    });

    function onMouseMove(event) {
        var newX = event.clientX - offsetX;
        var newY = event.clientY - offsetY;
        draggableElement.style.left = newX + 'px';
        draggableElement.style.top = newY + 'px';
    }

    function isColliding(draggable, image) {
        var draggableRect = draggable.getBoundingClientRect();
        var imageRect = image.getBoundingClientRect();

        return !(
            draggableRect.right < imageRect.left ||
            draggableRect.left > imageRect.right ||
            draggableRect.bottom < imageRect.top ||
            draggableRect.top > imageRect.bottom
        );
    }

</script>

</body>
</html>